<template>
  <div class="range-selector-container">
    <!-- 进度条 -->
    <div class="range-wrapper" ref="rangeWrapper" :style="{ height: height + 'px' }">
      <!-- 进度条的填充部分 -->
      <div class="range-fill" :style="fillStyle">
        <span class="range-value">{{ value }}</span>
      </div>

      <!-- 红色分界线 -->
      <div class="range-divider" :style="dividerStyle"></div>

      <!-- 滑块 -->
      <div class="slider-thumb" :style="thumbStyle" @mousedown.stop.prevent="onThumbMouseDown"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, defineProps, defineEmits } from 'vue';

// 接收父组件传入的属性
const props = defineProps({
  min: { type: Number, default: 0 },
  max: { type: Number, default: 100 },
  height: { type: Number, default: 30 },
  modelValue: { type: Number, required: true },
});

// 定义事件，通知父组件更新值
const emit = defineEmits(['update:modelValue']);

// 获取进度条容器的引用
const rangeWrapper = ref(null);

// 本地数据更新和父组件值绑定
const value = ref(props.modelValue);

// 监听父组件值变化同步更新
watch(() => props.modelValue, (newValue) => {
  value.value = newValue;
});

// 计算进度条填充宽度样式
const fillStyle = computed(() => {
  const percentage = ((value.value - props.min) / (props.max - props.min)) * 100;
  return {
    width: `${percentage}%`,
    height: '100%',
    backgroundColor: '#cacacb', // 灰色
  };
});

// 计算分界线位置样式
const dividerStyle = computed(() => {
  const percentage = ((value.value - props.min) / (props.max - props.min)) * 100;
  return {
    left: `calc(${percentage}% - 1px)`, // 分界线偏移
    position: 'absolute',
    top: 0,
    height: '100%',
    width: '2px',
    backgroundColor: '#f44336', // 红色
  };
});

// 计算滑块位置样式
const thumbStyle = computed(() => {
  const percentage = ((value.value - props.min) / (props.max - props.min)) * 100;
  return {
    left: `calc(${percentage}% - 12px)`, // 滑块偏移
    position: 'absolute',
    top: 0,
    width: '24px',
    height: '100%',
    backgroundColor: 'rgba(255, 255, 255, 0.5)', // 半透明白色
    cursor: 'pointer',
  };
});

// 更新滑块值并通知父组件
const updateValue = (event) => {
  const rect = rangeWrapper.value.getBoundingClientRect();
  const offsetX = event.clientX - rect.left;
  const newPercentage = Math.min(Math.max(offsetX / rect.width, 0), 1);
  const newValue = Math.round(newPercentage * (props.max - props.min) + props.min);
  value.value = newValue;
  emit('update:modelValue', newValue); // 通知父组件
};

// 处理滑块拖动事件
const onThumbMouseDown = (event) => {
  updateValue(event);

  const onMouseMove = (event) => {
    updateValue(event);
  };

  const onMouseUp = () => {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  };

  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
};
</script>

<style scoped>
.range-selector-container {
  width: 100%;
}

.range-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #ececed; /* 浅灰色背景 */
}

.range-fill {
  height: 100%;
  background-color: #cacacb; /* 进度条灰色 */
  position: relative;
}

.range-value {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.range-divider {
  position: absolute;
  top: 0;
  height: 100%;
  width: 2px;
  background-color: #f44336; /* 红线 */
  z-index: 1;
}

.slider-thumb {
  position: absolute;
  top: 0;
  width: 24px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5); /* 半透明白色 */
  cursor: pointer;
  z-index: 2;
}
</style>
